<template>
	<div class="container">
		<div v-for="e in infoData.productList" class="container_item">
			<div class="title">近多出行租赁服务报价单</div>
			<div class="sheet1">
				<div
					v-for="item in formList.info"
					:key="item.label"
					class="item">
					<div class="label cell">
						{{ item.label }}
					</div>
					<div class="content cell">
						<TooltipDiv
							:content="
								'format' in item
									? item.format(
											(e.calcSnapshoot &&
												e.calcSnapshoot
													.financialProfitCalcResult) ||
												{},
											e || {},
									  )
									: ''
							"></TooltipDiv>
					</div>
				</div>
			</div>
			<div class="sheet2">
				<div class="t item" v-for="item in formList.details">
					<template
						v-if="
							typeof item.show == 'function' ? item.show(e) : true
						">
						<div class="label">
							{{ item.label }}
						</div>
						<div class="content">
							<div
								class="content_item"
								v-for="child in typeof item.children ==
								'function'
									? item.children(e)
									: item.children">
								<div class="label2 cell">
									{{ child.label }}
								</div>
								<div class="cell">
									{{ child.content(e) }}
								</div>
							</div>
						</div>
					</template>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import * as apis from '@/api/quota/forecast/edit/api.js';
	export default {
		components: {},
		props: {
			value: {
				required: false,
			},
			state: {
				required: false,
			},
			type: {
				required: false,
			},
		},
		dicts: ['quota_substitute_control_level'],
		data() {
			return {
				planDicts: {
					levelList: [],
					packagelList: [],
				},
			};
		},
		computed: {
			infoData() {
				let data = this._.cloneDeep(this.value);
				data?.productList?.forEach(product => {
					try {
						if (
							this.notEmpty(product?.calcSnapshoot) &&
							typeof product?.calcSnapshoot == 'string'
						) {
							product.calcSnapshoot = JSON.parse(
								product.calcSnapshoot,
							);
						}
					} catch (error) {
						console.warn(error);
					}
				});
				return data;
			},
			formList() {
				return {
					info: [
						{
							label: '车型',
							format: (e, row) => {
								return row?.plan?.carModelName;
							},
						},
						{
							label: '指导价',
							format: (e, row) => {
								return this.format_thousand(
									row?.plan?.carGuidePrice,
								);
							},
						},
						{
							label: '违章保证金',
							format: (e, row) => {
								return this.format_thousand(e.violationDeposit);
								// return this.format_thousand(
								//     row.plan?.planViolationCashdeposit
								// );
							},
						},
						{
							label: '合同保证金',
							format: (e, row) => {
								return this.format_thousand(e.deposit);
								// return this.format_thousand(
								//     row.plan?.planContractCashdeposit
								// );
							},
						},
						{
							label: '期数/月',
							format: (e, row) => {
								return this.format_thousand(
									row?.plan?.planTenancyType,
								);
							},
						},
						{
							label: '首期租金',
							format: (e, row) => {
								// if (this.value?.rentType_raw == "1") return 0;
								return this.format_thousand(
									e?.firstInstallmentRent,
									// row?.plan?.planFirstRent
								);
							},
							show: this.value?.rentType_raw == '2',
						},
						{
							label: '每月租金',
							format: (e, row) => {
								// if (
								//     row?.plan?.planRent &&
								//     row?.plan?.planPaymentFrequencyType
								// ) {
								//     let price = this.numberExcept(
								//         row?.plan?.planRent,
								//         row?.plan?.planPaymentFrequencyType
								//     );
								//     return this.format_thousand(price);
								// }
								// return "-";
								return this.format_thousand(e?.monthlyRent);
							},
						},
						{
							label: '残值金额',
							format: (e, row) => {
								// if (this.value?.rentType_raw == "1") return 0;
								return this.format_thousand(
									e.residualValue,
									// row?.plan?.planBalancepayment
								);
							},
							show: this.value?.rentType_raw == '2',
						},
						{
							label: '总计费用',
							format: (e, row) => {
								let p = 0;
								// let monthlyRent = this.numberExcept(
								//     row?.plan?.planRent,
								//     row?.plan?.planPaymentFrequencyType
								// );
								// if (monthlyRent && row?.plan?.planTenancyType) {
								//     p =
								//         this.numberRide(
								//             monthlyRent,
								//             row?.plan?.planTenancyType
								//         ) * 1;
								// }
								p = this.numberRide(
									e?.monthlyRent,
									row?.plan?.planTenancyType,
								);
								if (this.value.rentType_raw == '1') {
									return this.format_thousand(p);
								} else {
									let price =
										p +
										(e.residualValue * 1 ?? 0) +
										(e?.firstInstallmentRent * 1 ?? 0);
									// (row?.plan?.planBalancepayment * 1 ?? 0) +
									// (row?.plan?.planFirstRent * 1 ?? 0);
									//     +
									// ((row.plan?.planContractCashdeposit &&
									//     row.plan?.planContractCashdeposit *
									//         1) ??
									//     0) +
									// ((e?.violationDeposit &&
									//     e?.violationDeposit * 1) ??
									//     0);
									return Number.isFinite(price)
										? this.format_thousand(price.toFixed(2))
										: '-';
								}
							},
						},
					],
					details: [
						{
							label: '维保',
							show: e => {
								return e.maintenanceList?.length > 0;
							},
							children: e => {
								return e.maintenanceList?.map(item => ({
									label: item.maintenanceItemTypeStr,
									content: () => item.maintenanceCount,
								}));
							},
						},
						{
							label: '保险',
							children: [
								{
									label: '涵盖年限',
									content: e => {
										return e.insuranceBuyType == '1'
											? '首年'
											: e.insuranceBuyType == '2'
											? '合同期内'
											: '-';
									},
								},
								{
									label: '险种保额',
									content: e => {
										let arr = [];
										e?.insuranceList?.map(item => {
											arr.push(
												`${item.insuranceItemNameVal}${
													item.sumInsuredVal
														? '、'
														: ''
												}${
													item.sumInsuredVal
														? item.sumInsuredVal
														: ''
												}`,
											);
										});
										return arr.join('，');
									},
								},
							],
						},
						{
							label: '替车',
							children: [
								{
									label: '是否含维保替车',
									content: e => {
										let item =
											this?.planDicts?.levelList?.find(
												item =>
													item.id ==
													e.substituteMaintenanceLevelType,
											);
										return item?.level ?? '否';
									},
								},
								{
									label: '是否含限行替车',
									content: e => {
										let item =
											this.dict.type.quota_substitute_control_level?.find(
												item =>
													item.value ==
													e?.substituteControlLevelType,
											);
										return item?.label;
									},
								},
							],
						},
						{
							label: '精品装饰',
							children: [
								{
									label: '费用',
									content: e => {
										return this.format_thousand(
											e?.attachedDecorationAmount,
										);
									},
								},
								{
									label: '项目',
									content: e => {
										let arr = [];
										e.attachedDecorationList?.map(item => {
											arr.push(item.decorationVal);
										});
										return arr.join('，') || '-';
									},
								},
							],
						},
					],
				};
			},
		},
		created() {
			console.log(this.value);
			this.getLevelList();
		},
		mounted() {},
		methods: {
			// 获取报价替代车列表
			getLevelList() {
				apis.LevelList({}).then(res => {
					if (res.code == 200) {
						this.planDicts.levelList = res.data;
					}
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.container {
		margin: 20px;
		padding: 20px;
		background-color: #fff;
		border-radius: 8px;
		--width: 60%;
		--c1: 100px;
		--c2: 200px;
		--c3: 100px;
		--h: 35px;
		--chunkW: 200px;
	}
	div {
		min-width: 0;
		min-height: 0;
	}
	.cell {
		// height: var(--h);
		line-height: var(--h);
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		padding: 0 10px;
		border: 1px solid #dfe6ec;
		border-left: none;
		border-top: none;
	}
	.title {
		border: 1px solid #dfe6ec;
		border-bottom: none;
		text-align: center;
		line-height: 50px;
	}
	.sheet1 {
		border: 1px solid #dfe6ec;
		border-right: none;
		border-bottom: none;
		.item {
			display: grid;
			grid-template-columns: 300px 1fr;
			.label {
				color: #515a6e;
				font-size: 14px;
				font-weight: 500;
			}
			.content {
				color: #606266;
				font-size: 12px;
			}
		}
	}
	.sheet2 {
		border-left: 1px solid #dfe6ec;
		.item {
			display: grid;
			grid-template-columns: 100px 1fr;
			.label {
				color: #515a6e;
				font-size: 14px;
				font-weight: 500;
				width: 100px;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
				border: 1px solid #dfe6ec;
				border-left: none;
				border-top: none;
			}
			.content {
				color: #606266;
				font-size: 12px;
				.content_item {
					display: grid;
					grid-template-columns: 200px 1fr;
				}
			}
		}
	}
	.container_item {
		margin-bottom: 50px;
	}
</style>
